<template>
	<view class="home">
		<view class="search-box">
			<view class="input-box">
				<input type="text" placeholder="请输入搜索关键词" @focus="clickMain"/>
				<image></image>
			</view>
			<view class="search-btn" @click="clickMain()">搜索</view>
		</view>

		<!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
		<swiper circular indicator-dots :autoplay="autoplay" :interval="interval">
			<!-- v-for循环遍历数组 -->
			<swiper-item v-for="item in listCarousel">
				<image :src="item.headerImage" @click="toDetail(item.headerLink)"></image>
			</swiper-item>
		</swiper>

		<!-- 放置整个导航模块-->
		<view class="nav">
			<!-- 单个小模块 复制四份 -->
			<view class="nav_item" v-for="item in listSpecial">
				<!-- 完全按照 -->
				<navigator :url="item.specialLink">
					<view class="">{{item.memo}}</view>
					<text>{{item.specialName}}</text>
				</navigator>
			</view>
		</view>

		<!-- 推荐画家 -->
		<view class="hot_goods">
			<view class="tit">推荐画家</view>
			<!-- 画家信息 -->
			<view class="goods_list">

				<!-- 画家信息 -->
				<view v-for="item in listPainter">
					<view class="goods_item">
						<image :src="item.painterImage" @click="toDetail(item.recommendedLink)"></image>

						<view class="price">
							<text>{{item.painterName}}</text>
							<text>{{item.worksNum}}副</text>
						</view>
						<view class="name">
							{{item.recommendTitle}}
						</view>
					</view>

				</view>
			</view>

			<!-- 商品列表 -->
			<view class="tit">热卖作品</view>
			<view class="goods_list">
				<view v-for="item in listDraw">
					<!-- 单个商品 -->
					<view class="goods_item">
						<navigator :url="item.artLink">
							<image :src="item.artImage"></image>
						</navigator>

						<view class="price">
							<text>一口价：{{item.artPrice}}</text>
						</view>
						<view class="name">
							<text>{{item.artName}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>

		<view class="bottom"></view>
		<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
	</view>
</template>

<script>
import global from '@/global.js'
import commonUserTabBar from "@/pages/commonUserTabBar/commonUserTabBar.vue"//路径根据你的文件修改
Vue.component('commonUserTabBar', commonUserTabBar)

//封装axios请求
import Vue from 'vue'
import axios from 'axios'

export default {
	data() {
		return {
			//当前选项卡
			currentTab: '/pages/index/index',
			listCarousel: [],
			autoplay: 'true', //自动切换轮播图
			interval: 5000, //自动切换时间间隔
			listPainter: [],
			listSpecial: [],
			listDraw: [],
		}
	},
	methods: {
		fetchData() {
			uni.request({
				url: global.baseUrl + 'api/main/recommend', // 接口地址
				method: 'get',
				dataType: "json",
				header: {
					'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
				},
				success: (res) => {
					if (res.data.code == 0) {
						this.listCarousel = res.data.data.listCarousel;
						this.listSpecial = res.data.data.listSpecial;
						this.listPainter = res.data.data.listPainter;
						this.listDraw = res.data.data.listDraw;
;
					} else {
						console.log("request result error: ", res.data.code)
					}
				},
				fail: (error) => {
					console.log(error)
				}
			})
		},
		toDetail(url) {
			console.log("List item url :  ", url)
			uni.navigateTo({
				url: url,
			})
		},
		clickMain(){
			uni.navigateTo({
				url: '/pages/search/search',
			});
		}
		
		
	},
	onLoad() {
		this.fetchData() // 在页面加载时调用fetchData方法获取数据
	}
}
</script>
<!-- 开启scss -->
<style lang="scss">
.home {
	swiper {
		width: 750rpx;
		height: 380rpx;
		padding-top: 30rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.nav {
		width: 750rpx;
		// 四项全部在一排，开启flex布局
		display: flex;
		//自动换行
		flex-wrap: wrap;

		.nav_item {
			//四个元素，每个宽设置25%
			width: 25%;

			//设置文字居中
			text-align: center;

			view {
				background-color: #b50e03;
				//设置圆角为高的一半，就变成了圆
				border-radius: 60rpx;
				width: 120rpx;
				height: 120rpx;
				//设置左右auto，可以变成水平居中
				margin: 15rpx auto;
				//设置行高，可以改变字体图标的上下位置
				line-height: 120rpx;
				color: #fff;
				font-size: 50rpx;
			}

			.icon-tupian {
				font-size: 45rpx;
			}

			text {
				font-size: 30rpx;
			}
		}
	}

	.hot_goods {
		background-color: #eee;
		// 防止掉进子元素的margin里面
		overflow: hidden;
		margin-top: 10px;

		.tit {
			height: 50px;
			line-height: 50px;
			text-align: center;
			letter-spacing: 20px;
			color: #e50b03;
			background-color: #fff;
			margin: 10rpx 0;
		}

		.goods_list {
			padding: 0 15rpx;
			//显示在一行
			display: flex;
			//自动换行
			flex-wrap: wrap;
			width: 100%;
			.goods_item {
				background-color: #fff;
				margin: 10rpx 0;
				width: 352rpx;
				//防止盒子被撑大
				box-sizing: border-box;
				padding: 15rpx;

				image {
					width: 100%;
					height: 150px;
					//把图片设置成块元素，才让用margin设置居中
					display: block;
					margin: 0 auto;
				}

				.price {
					color: #e50b03;
					font-size: 28rpx;

					//选择第二个价格
					text:nth-child(2) {
						font-size: 28rpx;
						color: #ccc;
						//离左边数字的距离
						margin-left: 28rpx;
						//删除线
						//text-decoration: line-through;
					}
				}

				.name {
					font-size: 28rpx;
					line-height: 50rpx;
					padding-bottom: 15rpx;
					padding-top: 10rpx;
				}
			}
		}
	}
}
</style>